<template>
  <div class="banner_x center">
    <router-link to="/index"><div class="logo fl"></div></router-link>
    <a href=""><div class="ad_top fl"></div></a>
    <div class="nav fl">
      <ul>
        <li><router-link to="/index">小米手机</router-link></li>
        <li><a href="">红米</a></li>
        <li><a href="">平板·笔记本</a></li>
        <li><a href="">电视</a></li>
        <li><a href="">盒子·影音</a></li>
        <li><a href="">路由器</a></li>
        <li><a href="">智能硬件</a></li>
        <li><a href="">服务</a></li>
        <li><a href="">社区</a></li>

      </ul>
    </div>
    <div class="search fr">
      <form action="" method="post">
        <div class="text fl">
          <input type="text" class="shuru"  placeholder="小米6&nbsp;小米MIX现货">
        </div>
        <div class="submit fl">
          <input type="submit" class="sousuo" value="搜索"/>
          <span v-if="username" >您好! {{username}}</span>
          <span v-if="!username"> <router-link to="login/">您好,请登录!</router-link></span>

        </div>
        <div class="clear"></div>
      </form>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>

    export default {
        name: "top",
      data:function () {
        return {
          username: ''
        }
      },
      mounted() {
        // 通过cookie获取用户名
        this.username = this.$cookie.get('username')
      }
    }
</script>
<style scoped >
  @import '../../assets/css/style.css';
</style>
